<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <UserSearchComponent @setUserInfo="setUserInfo" />
      <UserInfo :userInfo="userInfo" />
      <el-form-item label="用户权限" prop="isVIP">
        <el-select v-model="form.isVIP" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请原因" prop="remark">
        <div style="display: flex; flex-direction: column">
          <el-input
            v-model="form.remark"
            type="textarea"
            :maxlength="100"
            :show-word-limit="true"
            :input-style="{ height: '100px', width: '300px' }"
          />
        </div>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          class="primary"
          @click="submitForm(formRef)"
          :disabled="!form.orderStudent"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="tsx" setup>
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import UserSearchComponent from '@/components/UserSearchComponent/index.vue';
import UserInfo from '@/components/UserInfo/index.vue';
import { get } from 'lodash';
const emit = defineEmits(['submit']);
// 用户信息
const userInfo: { [key: string]: any } = reactive({
  当前权限: '',
  '历史变更次数(次)': '',
});
// 权限选项数据
const options = ref([
  { id: 1, label: '普通用户' },
  { id: 2, label: '志愿VIP' },
  { id: 3, label: '升学VIP' },
]);
const formRef = ref<FormInstance>();
// 表单数据
const form = reactive({
  isVIP: '',
  remark: '',
  orderStudent: '',
});

// 表单验证
const rules = reactive<FormRules>({
  isVIP: [
    {
      required: true,
      trigger: 'blur',
      message: '请选择修改用户权限',
    },
  ],
});

// 表单提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      const params = {
        // 修改前的成绩
        afterIsVIP:
          userInfo['当前权限'] == '普通用户'
            ? 1
            : userInfo['当前权限'] == '志愿VIP'
              ? 2
              : 3,
        // 历史变更次数
        aftarGkb_score_num: userInfo['历史变更次数(次)'],
      };
      emit('submit', { ...form, ...params });
    }
  });
};
const setUserInfo = (val: any) => {
  const params = {
    当前权限: (() => {
      const isVIP = get(val, 'isVIP', 1);
      return isVIP == 1 ? '普通用户' : isVIP == 2 ? '志愿VIP' : '升学VIP';
    })(),
    '历史变更次数(次)': get(val, 'gkb_score_num', 0) + '次',
  };
  Object.assign(userInfo, params);
  form.orderStudent = get(val, 'phone', '');
};
</script>

<style lang="scss" scoped>
.primary {
  width: 170px;
  color: #fff;
  background-color: #165dff;
  border-color: #165dff;
  height: 40px;
}

.primary:hover {
  opacity: 0.8;
}
</style>
